<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>如果活 - 登录</title>
</head>

<body>
  <style>
    /* ===== CSS 变量定义 ===== */
    :root {
      /* 颜色系统 */
      --primary-color: #165DFF;
      --primary-light: rgba(22, 93, 255, 0.1);
      --primary-dark: #0E4BCC;
      --background-color: #F7F9FC;
      --white: #FFFFFF;
      --text-primary: #333333;
      --text-secondary: rgba(255, 255, 255, 0.9);
      --accent-yellow: #FFDD55;
      --accent-pink: #FFE0E0;
      --success-color: #00B42A;
      --error-color: #F53F3F;
      --border-color: #E5E6EB;

      /* 尺寸系统 */
      --container-max-width: 480px;
      --border-radius-sm: 8px;
      --border-radius-md: 16px;
      --border-radius-lg: 24px;
      --border-radius-xl: 32px;
      --border-radius-full: 9999px;

      /* 间距系统 */
      --spacing-xs: 4px;
      --spacing-sm: 8px;
      --spacing-md: 16px;
      --spacing-lg: 24px;
      --spacing-xl: 32px;
      --spacing-2xl: 48px;

      /* 字体系统 */
      --font-family: 'Helvetica', 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      --font-size-sm: 14px;
      --font-size-base: 16px;
      --font-size-lg: 18px;
      --font-size-xl: 20px;
      --font-size-2xl: 24px;
      --font-size-3xl: 32px;

      /* 阴影系统 */
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
      --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-family);
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-md);
    }

    .login-container {
      width: 100%;
      max-width: var(--container-max-width);
      background: var(--white);
      border-radius: var(--border-radius-xl);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      position: relative;
    }

    /* 上半部分 - 背景图片区域 */
    .hero-section {
      position: relative;
      height: 300px;
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: var(--spacing-xl);
      text-align: center;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23FFDD55;stop-opacity:0.1" /><stop offset="100%" style="stop-color:%23FFE0E0;stop-opacity:0.1" /></linearGradient></defs><circle cx="80" cy="80" r="60" fill="url(%23grad1)"/><circle cx="320" cy="220" r="40" fill="url(%23grad1)"/><path d="M50 200 Q100 150 150 200 T250 200" stroke="url(%23grad1)" stroke-width="3" fill="none"/></svg>') no-repeat center;
      background-size: cover;
      opacity: 0.3;
    }

    .logo-section {
      position: relative;
      z-index: 2;
      margin-bottom: var(--spacing-lg);
    }

    .logo {
      width: 60px;
      height: 60px;
      background: var(--white);
      border-radius: var(--border-radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto var(--spacing-md);
      box-shadow: var(--shadow-md);
    }

    .logo-text {
      font-size: var(--font-size-2xl);
      font-weight: bold;
      color: var(--white);
      margin-bottom: var(--spacing-sm);
    }

    .slogan {
      color: var(--text-secondary);
      font-size: var(--font-size-base);
      line-height: 1.5;
      max-width: 280px;
    }

    /* 装饰元素 */
    .decoration {
      position: absolute;
      z-index: 1;
    }

    .decoration-1 {
      width: 80px;
      height: 80px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      top: 20px;
      left: 20px;
    }

    .decoration-2 {
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
      bottom: 20px;
      right: 20px;
    }

    /* 下半部分 - 登录表单区域 */
    .form-section {
      padding: var(--spacing-2xl) var(--spacing-xl);
      background: var(--white);
    }

    .form-title {
      font-size: var(--font-size-2xl);
      font-weight: bold;
      color: var(--text-primary);
      text-align: center;
      margin-bottom: var(--spacing-lg);
    }

    .form-subtitle {
      font-size: var(--font-size-sm);
      color: #666;
      text-align: center;
      margin-bottom: var(--spacing-xl);
    }

    .form-group {
      margin-bottom: var(--spacing-lg);
    }

    .form-label {
      display: block;
      font-size: var(--font-size-sm);
      color: var(--text-primary);
      margin-bottom: var(--spacing-sm);
      font-weight: 500;
    }

    .form-input {
      width: 100%;
      padding: var(--spacing-md);
      border: 2px solid var(--border-color);
      border-radius: var(--border-radius-md);
      font-size: var(--font-size-base);
      transition: all 0.3s ease;
      background: var(--white);
    }

    .form-input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px var(--primary-light);
    }

    .form-input.error {
      border-color: var(--error-color);
    }

    .input-group {
      display: flex;
      gap: var(--spacing-sm);
    }

    .input-group .form-input {
      flex: 1;
    }

    .send-code-btn {
      padding: var(--spacing-md) var(--spacing-lg);
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius-md);
      font-size: var(--font-size-sm);
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .send-code-btn:hover {
      background: var(--primary-dark);
    }

    .send-code-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .login-btn {
      width: 100%;
      padding: var(--spacing-md);
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius-md);
      font-size: var(--font-size-lg);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: var(--spacing-lg);
    }

    .login-btn:hover {
      background: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .login-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .error-message {
      color: var(--error-color);
      font-size: var(--font-size-sm);
      margin-top: var(--spacing-xs);
      display: none;
    }

    .error-message.show {
      display: block;
    }

    .success-message {
      color: var(--success-color);
      font-size: var(--font-size-sm);
      margin-top: var(--spacing-xs);
      display: none;
    }

    .success-message.show {
      display: block;
    }

    .countdown {
      color: #666;
      font-size: var(--font-size-sm);
    }

    .footer-links {
      text-align: center;
      margin-top: var(--spacing-xl);
      padding-top: var(--spacing-lg);
      border-top: 1px solid var(--border-color);
    }

    .footer-links a {
      color: #666;
      text-decoration: none;
      font-size: var(--font-size-sm);
      margin: 0 var(--spacing-sm);
    }

    .footer-links a:hover {
      color: var(--primary-color);
    }

    /* 响应式设计 */
    @media (max-width: 480px) {
      .hero-section {
        height: 250px;
        padding: var(--spacing-lg);
      }

      .form-section {
        padding: var(--spacing-xl) var(--spacing-lg);
      }

      .input-group {
        flex-direction: column;
      }

      .send-code-btn {
        width: 100%;
      }
    }

    /* 加载动画 */
    .loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  </style>

  <div class="login-container">
    <!-- 上半部分 - 品牌展示区域 -->
    <div class="hero-section">
      <div class="decoration decoration-1"></div>
      <div class="decoration decoration-2"></div>

      <div class="logo-section">
        <div class="logo">
          <span style="font-size: 24px; color: var(--primary-color); font-weight: bold;">如</span>
        </div>
        <div class="logo-text">如果活</div>
        <div class="slogan">让生活更美好，让健康更简单</div>
      </div>
    </div>

    <!-- 下半部分 - 登录表单区域 -->
    <div class="form-section">
      <form id="loginForm">
        <div class="form-group">
          <label class="form-label" for="phone">手机号码</label>
          <input type="tel" id="phone" class="form-input" placeholder="请输入手机号码" maxlength="11" required>
          <div class="error-message" id="phoneError"></div>
        </div>

        <div class="form-group">
          <label class="form-label" for="code">验证码</label>
          <div class="input-group">
            <input type="text" id="code" class="form-input" placeholder="请输入验证码" maxlength="6" required>
            <button type="button" class="send-code-btn" id="sendCodeBtn" onclick="sendVerificationCode()">
              发送验证码
            </button>
          </div>
          <div class="error-message" id="codeError"></div>
          <div class="success-message" id="codeSuccess"></div>
        </div>

        <button type="submit" class="login-btn" id="loginBtn">
          登录
        </button>
      </form>

      <div class="footer-links">
        <a href="#" onclick="showTerms()">用户协议</a>
        <span>·</span>
        <a href="#" onclick="showPrivacy()">隐私政策</a>
      </div>
    </div>
  </div>

  <script>
    // 全局变量
    let countdownTimer = null;
    let countdownSeconds = 60;

    // 手机号验证
    function validatePhone(phone) {
      const phoneRegex = /^1[3-9]\d{9}$/;
      return phoneRegex.test(phone);
    }

    // 验证码验证
    function validateCode(code) {
      const codeRegex = /^\d{6}$/;
      return codeRegex.test(code);
    }

    // 显示错误信息
    function showError(elementId, message) {
      const errorElement = document.getElementById(elementId);
      errorElement.textContent = message;
      errorElement.classList.add('show');

      // 清除成功信息
      const successElement = document.getElementById(elementId.replace('Error', 'Success'));
      if (successElement) {
        successElement.classList.remove('show');
      }
    }

    // 显示成功信息
    function showSuccess(elementId, message) {
      const successElement = document.getElementById(elementId);
      successElement.textContent = message;
      successElement.classList.add('show');

      // 清除错误信息
      const errorElement = document.getElementById(elementId.replace('Success', 'Error'));
      if (errorElement) {
        errorElement.classList.remove('show');
      }
    }

    // 清除错误信息
    function clearError(elementId) {
      const errorElement = document.getElementById(elementId);
      errorElement.classList.remove('show');
    }

    // 发送验证码
    async function sendVerificationCode() {
      const phoneInput = document.getElementById('phone');
      const phone = phoneInput.value.trim();
      const sendBtn = document.getElementById('sendCodeBtn');

      // 验证手机号
      if (!phone) {
        showError('phoneError', '请输入手机号码');
        phoneInput.classList.add('error');
        return;
      }

      if (!validatePhone(phone)) {
        showError('phoneError', '请输入正确的手机号码');
        phoneInput.classList.add('error');
        return;
      }

      // 清除错误状态
      clearError('phoneError');
      phoneInput.classList.remove('error');

      // 开始倒计时
      startCountdown();

      try {
        // 这里应该调用实际的发送验证码API
        // const response = await fetch('/api/send-code', {
        //   method: 'POST',
        //   headers: { 'Content-Type': 'application/json' },
        //   body: JSON.stringify({ phone })
        // });

        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000));

        showSuccess('codeSuccess', '验证码已发送，请查收短信');

        // 实际项目中，这里应该处理API响应
        console.log('发送验证码到:', phone);

      } catch (error) {
        console.error('发送验证码失败:', error);
        showError('codeError', '发送失败，请重试');
        resetCountdown();
      }
    }

    // 开始倒计时
    function startCountdown() {
      const sendBtn = document.getElementById('sendCodeBtn');
      sendBtn.disabled = true;
      countdownSeconds = 60;

      countdownTimer = setInterval(() => {
        countdownSeconds--;
        sendBtn.textContent = `${countdownSeconds}秒后重发`;

        if (countdownSeconds <= 0) {
          resetCountdown();
        }
      }, 1000);
    }

    // 重置倒计时
    function resetCountdown() {
      if (countdownTimer) {
        clearInterval(countdownTimer);
        countdownTimer = null;
      }

      const sendBtn = document.getElementById('sendCodeBtn');
      sendBtn.disabled = false;
      sendBtn.textContent = '发送验证码';
    }

    // 表单提交
    document.getElementById('loginForm').addEventListener('submit', async function (e) {
      e.preventDefault();

      const phoneInput = document.getElementById('phone');
      const codeInput = document.getElementById('code');
      const loginBtn = document.getElementById('loginBtn');

      const phone = phoneInput.value.trim();
      const code = codeInput.value.trim();

      // 验证手机号
      if (!phone) {
        showError('phoneError', '请输入手机号码');
        phoneInput.classList.add('error');
        return;
      }

      if (!validatePhone(phone)) {
        showError('phoneError', '请输入正确的手机号码');
        phoneInput.classList.add('error');
        return;
      }

      // 验证验证码
      if (!code) {
        showError('codeError', '请输入验证码');
        codeInput.classList.add('error');
        return;
      }

      if (!validateCode(code)) {
        showError('codeError', '请输入6位数字验证码');
        codeInput.classList.add('error');
        return;
      }

      // 清除所有错误状态
      clearError('phoneError');
      clearError('codeError');
      phoneInput.classList.remove('error');
      codeInput.classList.remove('error');

      // 显示加载状态
      loginBtn.disabled = true;
      loginBtn.innerHTML = '<span class="loading"></span> 登录中...';

      try {
        // 这里应该调用实际的登录API
        // const response = await fetch('/api/login', {
        //   method: 'POST',
        //   headers: { 'Content-Type': 'application/json' },
        //   body: JSON.stringify({ phone, code })
        // });

        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 2000));

        // 实际项目中，这里应该处理登录成功后的逻辑
        console.log('登录成功:', { phone, code });

        // 跳转到密码输入页
        window.location.href = '进入主页前输入密码.html';

      } catch (error) {
        console.error('登录失败:', error);
        showError('codeError', '登录失败，请检查验证码是否正确');
      } finally {
        // 恢复按钮状态
        loginBtn.disabled = false;
        loginBtn.textContent = '登录';
      }
    });

    // 输入框实时验证
    document.getElementById('phone').addEventListener('input', function () {
      const phone = this.value.trim();
      if (phone && !validatePhone(phone)) {
        this.classList.add('error');
      } else {
        this.classList.remove('error');
        clearError('phoneError');
      }
    });

    document.getElementById('code').addEventListener('input', function () {
      const code = this.value.trim();
      if (code && !validateCode(code)) {
        this.classList.add('error');
      } else {
        this.classList.remove('error');
        clearError('codeError');
      }
    });

    // 页面加载完成后的初始化
    document.addEventListener('DOMContentLoaded', function () {
      // 自动聚焦到手机号输入框
      document.getElementById('phone').focus();
    });

    // 用户协议和隐私政策
    function showTerms() {
      alert('用户协议页面');
    }

    function showPrivacy() {
      alert('隐私政策页面');
    }
  </script>
</body>

</html>